<template>
	<!-- 充币 -->
	<view class="charge-money-box">
		<nav-bar :title="i18n.charge.title" @_back="_back" rightIcon="plan" @rightClick="rightClick" />
		<view class="container">
			<!-- 二维码 -->
			<view class="qr-code list-bg">
				<view class="qr-image view-bg">
					<tki-qrcode ref="qrcode" :val="info.ewm" @result="resultQr" :showLoading="false" :loadMake="true" :size="320" />
				</view>
				<view class="qr-btn-main main-btn" @click="saveqr">
					<text>{{i18n.charge.saveCode}}</text>
				</view>
				<view class="qr-address">
					<text>{{i18n.charge.address}}</text>
				</view>
				<view class="white-text">
					<text>{{info.ewm}}</text>
				</view>
				<view class="qr-btn-default default-btn" @click="copyText(info.ewm)">
					<text>{{i18n.charge.copyAddress}}</text>
				</view>
			</view>
			<!-- list -->
			<custom-list :title="i18n.charge.fillCurrency">
				<input v-model="info.number" type="number" :placeholder="i18n.charge.price">
			</custom-list>
			<custom-list :title="i18n.charge.chain" :isHeng="false">
				<view class="lian-box">
					<view class="default-btn" :class="currentIndex === item.id? 'main-bg': ''" v-for="item in lianList" :key="item.id"
					 @click="lianClick(item)">
						<text>{{item.name}}</text>
					</view>
				</view>
			</custom-list>
			<custom-list :title="i18n.charge.walletAddress">
				<view class="dis-between">
					<input v-model="info.address" type="text" :placeholder="i18n.charge.enterAddress">
					<text class="main-color" @click="walletOpen">{{i18n.common.choose}}</text>
				</view>
			</custom-list>
			<custom-list :title="i18n.charge.screenshot" :isHeng="false">
				<u-upload :action="action" ref="uUpload" :auto-upload="true" :custom-btn="true" width="300" height="300" max-count="1">
					<image v-if="info.upimg" slot="addBtn" class="upload-btn"  :src="info.upimg" mode="widthFix"></image>
					<view slot="addBtn" class="upload-btn" v-else>
						<view>
							<u-icon name="plus-circle" size="88" color="rgba(255, 255, 255, .3)"></u-icon>
							<text class="text-box">{{i18n.charge.uploadText}}</text>
						</view>
					</view>
				</u-upload>
			</custom-list>
			<custom-list :title="i18n.common.notification" :font="32" :isHeng="false">
				<view class="notice" v-html="cb_remarks">
				<!-- 	<text>{{i18n.charge.notice1}}</text>
					<view>
						<text>{{i18n.charge.notice2}}</text>
					</view> -->
				</view>
			</custom-list>
			<custom-submit @click="submit" :loading="loading" style="margin-top: 90rpx;" :title="i18n.common.confirm"></custom-submit>
		</view>
		<!-- 钱包 -->
		<select-currency ref="selectWallet" :list="walletSelectList" @click="walletClick"></select-currency>
		<tips-popup ref="tipsQr">
			<view class="tips-container">
				<view class="tips-title bold">
					<text>{{i18n.share.longOut}}</text>
				</view>
				<img class="qr-iamges" :src="qrUrl" />
			</view>
		</tips-popup>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar/index.vue'
	import CustomList from '@/components/CustomList/index.vue'
	import CustomSubmit from '@/components/CustomSubmit/index.vue'
	import SelectCurrency from '@/components/SelectCurrency/vue.vue'
	import TipsPopup from '@/components/TipsPopup/index.vue'
	import {
		walletIn,
		upload
	} from '@/api/index.js'
	import {
		mapGetters
	} from 'vuex'
	import {
		copy,
		Toast
	} from '@/utils/util.js'
	import {
		base64ToPath
	} from '@/js_sdk/image-tools/index.js'
	export default {
		components: {
			NavBar,
			CustomList,
			CustomSubmit,
			SelectCurrency,
			TipsPopup
		},
		data() {
			return {
				lianList: [{
						name: 'ERC20',
						id: 0
					},
					{
						name: 'OMNI',
						id: 1
					},
				],
				form: {},
				info: {
					links: 'ERC20',
					ewm: 'www.baidu.com',
					upimg: '',
					address: '',
					number: 0
				},
				loading: false,
				currentIndex: 0,
				action: 'http://13860.shikecm.com/api/upload',
				qrUrl: '',
			}
		},
		computed: {
			...mapGetters(['token', 'walletSelectList', 'cb_remarks', 'wallet_min_cz', 'wallet_max_cz', 'currencyList']),
			i18n() {
				return this.$t('message');
			},
		},
		onLoad(parmas) {
			this.info.currency_id = parmas.id;
			for(let i in this.currencyList) {
				if (this.currencyList[i].id === Number(parmas.id)) {
					this.info.ewm = this.currencyList[i].link
				}
			}
		},
		methods: {
			_back() {
				uni.navigateBack();
			},
			copyText(text) {
				copy(text, this.i18n.common.copySuccess, this.i18n.common.copyFail);
			},
			lianClick(item) {
				if (this.currentIndex === item.id) return;
				this.currentIndex = item.id;
				this.info.links = item.name;
			},
			saveqr() {
				// #ifndef H5
				this.$refs.qrcode._saveCode()
				// #endif
				// #ifdef H5
				let en = window.navigator.userAgent.toLowerCase()
				// 匹配en中是否含有MicroMessenger字符串
				if (en.match(/MicroMessenger/i) == 'micromessenger') {
					this.$refs.tipsQr.open('fall');
				}
				if (en.match(/MicroMessenger/i) != 'micromessenger') {
					base64ToPath(this.qrUrl).then(res => {
						let oA = document.createElement("a");
						oA.download = " "; // 设置下载的文件名，默认是'下载'  
						oA.href = res;
						oA.click();
						document.body.appendChild(oA);
						oA.remove(); // 下载之后把创建的元素删除 
					}).catch((error) => {
						console.log(error)
					})
				}
				// #endif
			},
			rightClick() {
				uni.navigateTo({
					url: '/pages/index/chargeList'
				})
			},
			async submit() {
				let isUpload = await this.onListChange();
				// if (!this.info.number) return Toast(this.i18n.charge.price);
				if (this.info.number < this.wallet_min_cz || this.info.number > this.wallet_max_cz) return Toast(this.i18n.common.manyCB + this.wallet_min_cz + '~' + this.wallet_max_cz + this.i18n.common.between);
				if (!this.info.address) return Toast(this.i18n.charge.enterAddress);
				if (!isUpload) return Toast(this.i18n.charge.screenshot);
				this.info.token = this.token;
				this.loading = true;
				let {
					error,
					res
				} = await walletIn(this.info);
				if (error) return this.loading = false;;
				await Toast(this.i18n.charge.success);
				this.loading = false;
				this.rightClick();


			},
			resultQr(val) {
				this.qrUrl = val;
			},
			walletOpen() {
				this.$refs.selectWallet.open();
			},
			walletClick(val) {
				this.info.address = val.name;
			},
			async onListChange() {
				let lists = this.$refs.uUpload.lists;
				if (!lists.length) return false;
				for (let i in lists) {
					this.info.upimg = lists[i].response.message;
				}
				return true;
			},

		}
	}
</script>

<style lang="scss">
	.charge-money-box {
		padding-bottom: 40rpx;

		.qr-code {
			padding: 50rpx 0 40rpx;
			border-radius: 16rpx;
			margin-top: 10rpx;

			&>view {
				margin: 0 auto;
				text-align: center;

				&.qr-btn-main {
					margin: 40rpx auto;
				}

				&.qr-address {
					font-size: 28rpx;
					height: 28rpx;
					line-height: 28rpx;
					color: rgba(255, 255, 255, .54);
				}

				&.white-text {
					font-size: 26rpx;
					height: 26rpx;
					line-height: 26rpx;
					margin: 28rpx auto 30rpx;
				}
			}

			.qr-image {
				width: 320rpx;
				height: 320rpx;
			}
		}

		.lian-box {
			display: flex;

			&>view {
				height: 80rpx;
				border-radius: 16rpx;

				&:first-child {
					margin-right: 30rpx;
				}
			}
		}

		.upload-btn {
			width: 300rpx;
			height: 300rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
			border-radius: 16rpx;
			background-color: #7a7d8c;

			&>view {
				text-align: center;
			}

			.text-box {
				display: block;
				color: rgba(255, 255, 255, .54);
				font-size: 28rpx;
				height: 28rpx;
				line-height: 28rpx;
				margin-top: 30rpx;
			}
		}

		.notice {
			color: rgba(255, 255, 255, .54);
			// font-size: 26rpx;

			// text {
			// 	line-height: 52rpx;
			// 	text-indent: -20rpx;
			// 	padding-left: 20rpx;
			// 	display: inline-block;
			// }
		}
		
		.tips-container {
			color: #fff;
			font-size: 32rpx;
		
			.qr-iamges {
				width: 260rpx;
				height: 260rpx;
				margin-top: 40rpx;
			}
		
		}
	}
</style>
